{% extends "teacher/teacher_base.html" %}

{% block title %}课程管理 {% endblock %}

{% block content %}



    {% if search_keyword %}
        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
            <p class="text-sm text-blue-700">
                <i class="fa fa-search mr-2"></i>搜索结果："{{ search_keyword }}"（共 {{ courses|length }} 条记录）
            </p>
        </div>
    {% endif %}

    <div class="bg-white rounded-lg shadow-md p-6">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                <tr>
                    <th scope="col"
                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程编号
                    </th>
                    <th scope="col"
                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程名称
                    </th>

                    <th scope="col"
                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程学分
                    </th>
                    <th scope="col"
                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">院系
                    </th>
                    <th scope="col"
                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上课班级
                    </th>
                    <th scope="col"
                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上课时间
                    </th>
                    <th scope="col"
                        class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">操作
                    </th>
                </tr>
                </thead>
                <tbody id="courseTableBody">
                {% for course in courses %}
                    <tr data-course-id="{{ course.id }}" class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 text-sm text-gray-900">{{ course.course_code }}</td>
                        <td class="px-6 py-4 text-sm text-gray-900">{{ course.course_name }}</td>
                         <td class="px-6 py-4 text-sm text-gray-900">{{ course.credit }}</td>
                        <td class="px-6 py-4 text-sm text-gray-900">{{ course.department }}</td>
                        <td class="px-6 py-4 text-sm text-gray-900">{{ classes }}</td>
                        <td class="px-6 py-4 text-sm text-gray-900">{{ course.time}}</td>
                        <td class="px-6 py-4 text-center">
                            <!-- 新增查看按钮 -->
                            <button class="text-primary hover:text-primary/80 view-btn">
                                <i class="fa fa-eye mr-1"></i> 查看详情
                            </button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        {% if not courses %}
            <div class="p-12 text-center">
                <div class="mb-6">
                    <i class="fa fa-book text-4xl text-primary/10 animate-spin"></i>
                </div>
                <h3 class="text-lg font-bold text-gray-800 mb-2">暂无课程记录</h3>
                <p class="text-gray-500 mb-6">当前没有可查看的课程</p>
            </div>
        {% endif %}
    </div>

    <!-- 模态框（仅保留查看功能，移除表单） -->
    <div id="modal"
         class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl p-6 md:p-8 transform scale-95 transition-transform duration-300">
            <button class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
                    id="closeModal">
                <i class="fa fa-times text-gray-500"></i>
            </button>

            <div class="flex items-center mb-6">
                <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center mr-3">
                    <i class="fa fa-book text-primary"></i>
                </div>
                <h2 class="text-xl font-bold text-gray-800" id="modalTitle">课程详情</h2>
            </div>

            <!-- 课程详情展示区域 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="modalContent">
                <div class="bg-gray-50 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <i class="fa fa-info-circle text-gray-500 mr-2"></i> 基础信息
                    </h3>
                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <span class="text-gray-600">课程代码：</span>
                            <span id="modalCourseCode" class="text-gray-900 font-medium"></span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-gray-600">课程名称：</span>
                            <span id="modalCourseName" class="text-gray-900 font-medium"></span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-gray-600">课程类型：</span>
                            <span id="modalCourseType" class="text-gray-900 font-medium"></span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-gray-600">所属院系：</span>
                            <span id="modalDepartment" class="text-gray-900 font-medium"></span>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <i class="fa fa-calendar-check text-gray-500 mr-2"></i> 教学信息
                    </h3>
                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <span class="text-gray-600">任课教师：</span>
                            <span id="modalTeacher" class="text-gray-900 font-medium"></span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-gray-600">上课时间：</span>
                            <span id="modalTime" class="text-gray-900 font-medium"></span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-gray-600">上课地点：</span>
                            <span id="modalLocation" class="text-gray-900 font-medium"></span>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-gray-600">课程描述：</span>
                            <p id="modalDescription" class="text-gray-700"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看详情的JS逻辑 -->
    <script src="{{ url_for('static', filename='js/teacher_js/course_manage.js') }}" >

    </script>
{% endblock %}